Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) 5o. módulo Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br |
#elemento {
border: 10px solid #555;
width: 50%;
}
Valores possíveis:
Observação:
/* Valor padrão */
#elemento {
box-sizing: content-box;
}
#elemento {
box-sizing: border-box;
}
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aula04</title>
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<div id="content">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
</div>
</body>
</html>
/* Arquivo css/estilo.css */
/* propriedades css para formatação do identificador content */
#content {
background-color: #2e86c1; /* propriedade para cor de fundo */
height: 600px; /* propriedade para altura de conteúdo */
width: 600px; /* propriedade para largura de conteúdo */
padding: 5px; /* propriedade para espaçamento ao redor do conteúdo */
}
.item {
width: 250px; /* propriedade para largura do conteúdo */
height: 100px; /* propriedade para altura do conteúdo */
box-sizing: border-box; /* propriedade para tamanho do conteúdo */
border: 2px solid red; /* propriedade para borda do conteúdo */
padding: 10px; /* propriedade para espaçamento ao redor do conteúdo */
margin: 10px; /* propriedade para margens ao redor do conteúdo */
color: #000; /* propriedade para cores do texto do conteúdo */
font-weight: bold; /* propriedade para negrito do texto do conteúdo */
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5); /* propriedade para sombra do conteúdo */
background-color: #fff; /* propriedade para cor de fundo do conteúdo */
}
Saída:
Representação do CSS no Box Model de um elemento (class="item"):
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aula04</title>
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<div id="content">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
</div>
</body>
</html>
/* Arquivo css/estilo.css */
/* propriedades css para formatação do identificador content */
#content {
background-color: #2e86c1; /* propriedade para cor de fundo */
height: 600px; /* propriedade para altura de conteúdo */
width: 600px; /* propriedade para largura de conteúdo */
padding: 5px; /* propriedade para espaçamento ao redor do conteúdo */
}
.item {
width: 250px; /* propriedade para largura do conteúdo */
height: 100px; /* propriedade para altura do conteúdo */
box-sizing: content-box; /* propriedade para tamanho do conteúdo */
border: 2px solid red; /* propriedade para borda do conteúdo */
padding: 10px; /* propriedade para espaçamento ao redor do conteúdo */
margin: 10px; /* propriedade para margens ao redor do conteúdo */
color: #000; /* propriedade para cores do texto do conteúdo */
font-weight: bold; /* propriedade para negrito do texto do conteúdo */
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5); /* propriedade para sombra do conteúdo */
background-color: #fff; /* propriedade para cor de fundo do conteúdo */
}
Saída:
Representação do CSS no Box Model de um elemento (class="item"):
| 2.1.1 border-box | 2.1.2 content-box | |
|---|---|---|
| box-sizing: border-box; width: 250px; height: 100px; | box-sizing: content-box; width: 250px; height: 100px; | |
| Largura Final = 250px | Largura Final = 250px + 20px + 4px = 274px | |
/* Exemplo 1 */
#elemento {
margin: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
margin: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
margin: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
margin: top right bottom left;
}
| Exemplo1 | Exemplo2 | Exemplo3 | Exemplo4 |
|---|---|---|---|
| margin: 10px; | margin: 10px 8px; | margin: 10px 8px 6px; | margin: 10px 8px 6px 12px; |
/* Exemplo 1 */
#elemento {
padding: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
padding: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
padding: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
padding: top right bottom left;
}
| Exemplo1 | Exemplo2 | Exemplo3 | Exemplo4 |
|---|---|---|---|
| padding: 10px; | padding: 10px 8px; | padding: 10px 8px 6px; | padding: 10px 8px 6px 12px; |
Ou ainda o artigo CSS: Truques para dominar a propriedade Float.
O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Mediante o arquivo html abaixo, aplicaremos algumas modificações para exemplificar o uso do float.
#elemento {
float: left;
}
<!-- Exemplo index.html sem float -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Float</title>
<style>
.tudo {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
}
.menu, .conteudo {
height: 100px;
width: 250px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #ffffff;
margin: 10px;
}
</style>
</head>
<body>
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>
</body>
</html>
Saída:
<!-- Exemplo index.html COM float -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float</title>
<style>
.tudo {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
}
.menu, .conteudo {
height: 100px;
width: 250px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #ffffff;
margin: 10px;
}
/* Inclusão do FLOAT */
.menu {
float: left;
width: 30%;
}
.conteudo {
float: right;
width: 60%;
}
</style>
</head>
<body>
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>
</body>
</html>
Saída:
/* Código omitido para facilitar a visualização da modificação */
.menu {
float: left;
width: 30%;
visibility: hidden;
}
/* Código omitido para facilitar a visualização da modificação */
Saída:
Exemplo:
#elemento {
outline: rgba(0, 0,107,.65) solid 5px;
}
/* Código omitido para facilitar a visualização da modificação */
.menu, .conteudo {
height: 100px;
width: 250px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #ffffff;
margin: 10px;
outline: rgba(0, 0,107,.65) solid 5px;
}
/* Código omitido para facilitar a visualização da modificação */
Saída:
<!-- Exemplo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula04</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<div id="content">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
</div>
</body>
</html>
/* Exemplo estilo.css */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade display: flex */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: column;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: column-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
#elemento {
flex-flow: flex-direction flex-wrap;
}
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
flex-direction: row;
flex-wrap: wrap; /* Modificado de nowrap para wrap */
}
.item {
width: 250px; /* Modificado de 100px para 250px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
flex-direction: row;
flex-wrap: wrap-reverse; /* Modificado de wrap para wrap-reverse */
}
.item {
width: 250px; /* Modificado de 100px para 250px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
flex-direction: column-reverse;
flex-wrap: wrap-reverse; /* Modificado de wrap para wrap-reverse */
}
.item {
width: 250px; /* Modificado de 100px para 250px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
#elemento {
justify-content: flex-start;
}
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px; /* modificado de 600px para 900px */
padding: 5px;
display: flex;
flex-direction: row; /* modificado para row */
flex-wrap: wrap; /* modificado para wrap */
justify-content: flex-start; /* inserido */
}
.item {
width: 100px; /* modificado de 250px para 100px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end; /* modificado de flex-start para flex-end */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around; /* modificado de flex-end para space-around */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between; /* modificado de space-around para space-between */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
#elemento {
align-items: flex-start;
}
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-end;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: strech;
}
.item {
width: 100px; /* height removido */
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline;
}
.item {
width: 100px; /* height removido */
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Saída:
.item:nth-child(1) {
order: 4;
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Importante:
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
#content {
background-color: #2e86c1;
height: 600px;
width: 600px; /* modificado de 600px para 900px */
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
.item:nth-child(1) {
order: 4;
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Saída:
.item {
/* width: 100px; removido */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
flex-grow: 0; /* inserido */
flex-shrink: 1; /* inserido */
flex-basis: auto; /* inserido */
}
.item:nth-child(1) {
order: 4;
flex-grow: 2; /* inserido */
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Saída:
.item {
/* width: 100px; removido */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
flex-grow: 0; /* inserido */
flex-shrink: 1; /* inserido */
flex-basis: 65px; /* inserido */
}
.item:nth-child(1) {
order: 4;
flex-grow: 2; /* inserido */
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Saída:
Observação:
Para ampliar o conhecimento, consulte o artigo CSS Grid: One Layout, Multiple Ways.
De acordo com [CSS-TRICKS], "o CSS Grid Layout é o sistema de layout mais poderoso disponível em CSS. É um sistema bidimensional, o que significa que pode lidar com colunas e linhas, ao contrário do flexbox, que é amplamente um sistema unidimensional. Você poderá trabalhar com o Grid Layout aplicando regras CSS tanto a um elemento pai (que se torna o Grid Container) quanto aos filhos desse elemento (que se tornam Grid Items".
Para aprofundamento no assunto, sugiro a leitura do Guia completo do CSS-GRID.
ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2020.